<template>
	<view class="container">
        <camera :device-position="devicePosition" resolution="high" output-dimension="max" flash="off" @error="error" style="width: 100vw; height: 100vh;" v-show="!cameraSrc">
			<view class="camera-tip">
				根据下图中示例对准舌正面，舌体放松，舌面平展，舌尖略向下。口张大不要太用力 <text style="color: #FF702A;">操作教程</text>
			</view>
			<!-- 取景框 -->
			<cover-view class="camera-aperture">
				<cover-image class="outline-img" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/4d325ca3-bd3b-4c5f-9431-f7f9b72d0087.png" style=""></cover-image>
			</cover-view>
		</camera>
		<!-- 旋转摄像头 -->
		<view class="flip-view" @click="onDevicePosition" v-show="!cameraSrc">
			<cover-image class="menu-flip" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/58722978-6d30-4504-bf16-480a02f003d6.png"></cover-image>
			<text>旋转摄像头</text>
		</view>
		<!-- 图片预览 -->
		<view class="camera-img" v-show="cameraSrc">
			<view class="preview-box">
			    <image class="preview" :src="cameraSrc" mode="aspectFill"/>
			</view>
		</view>
		<!-- 底部菜单 -->
		<view class="menu">
			<!--底部菜单区域背景-->
			<cover-image class="menu-mask" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/71e37a5e-29a1-4e43-a250-bb03e75d3450.png"></cover-image>
			<!--快门键-->
			<view class="snapshot-view" @click="onTReport">
				<view class="snapshot-btn">
					<cover-image class="menu-snapshot" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/406e52ff-5e58-46d0-9e3c-6708ebc5ef44.png"></cover-image>
					<cover-image class="menu-confirm" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/b8e92ddf-138d-496c-8a80-46fbbf696116.png" v-show="cameraSrc"></cover-image>
				</view>
				<text v-show="cameraSrc">上传诊断</text>
			</view>
			<!-- 图片上传 -->
			<cover-image class="menu-upload" @click="toChooseImage" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a402867b-bf84-4e08-88ca-fe31a2d837af.png" v-show="!cameraSrc"></cover-image>
			<!-- 重新拍照 -->
			<cover-image class="menu-upload" @click="onBack" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/34af6cb6-1c8a-4c9a-8f5f-b58c816630a0.png" v-show="cameraSrc"></cover-image>
			<!-- 舌诊记录 -->
			<cover-image class="menu-record" @click="toRecord" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7910e73e-45b2-4e5d-a507-977dc3755176.png"></cover-image>
		</view>
		<u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
	//引入请求文件
	import {publicing} from '../../api/api.js'
	import {aiTongue} from '../../api/request.js'
	import {pathToBase64,base64ToPath} from 'image-tools'
	export default {
		data() {
			return {
				devicePosition: 'front', // front前置，back后置
				cameraSrc:'',
				innerAudioContext: null
			};
		},
		onLoad() {
			 this.innerAudioContext = uni.createInnerAudioContext();
			 this.playAudio('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/3b509c19-7c44-49d3-9fda-cb2045ca9673.mp3')
		},
		onUnload() {
			this.pauseAudio()
		},
		methods: {
			playAudio(src) {
				this.innerAudioContext.src = src;
				this.innerAudioContext.play();
			},
			pauseAudio() {
				this.innerAudioContext.pause();
			},
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						let tempImagePath = res.tempImagePath
						pathToBase64(tempImagePath).then(data => {
							this.cameraSrc = data				
						})
					}
				});
			},
			error(e) {
				// console.log(e.detail);
			},
			toChooseImage(){
				this.pauseAudio()
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						let tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths).then(data => {
							this.cameraSrc = data				
						})
					},
					fail: (err) => {}
				})
			},
			onDevicePosition(){
				this.devicePosition = this.devicePosition == 'back' ? 'front' : 'back'
			},
			onBack(){
				this.cameraSrc = ''
			},
			onTReport(){
				this.pauseAudio()
				if(!this.cameraSrc){
					this.takePhoto()
				}else{
					uni.showLoading({title:'图片上传中'})
					publicing(aiTongue,{
						imgBase64: this.cameraSrc
					}).then(res=>{
						if(res.data.code === 200){
							uni.navigateTo({
								url:'../../packagesAiPhoto/aiPhoto/tReport?id='+res.data.data.id
							})
							uni.hideLoading();
						}else{
							this.$refs.uToast.show({
								type: 'error',
								message: res.data.msg
							})
							uni.hideLoading();
						}
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			toRecord(){
				this.pauseAudio()
				uni.navigateTo({
					url:'../../packagesAiPhoto/aiPhoto/tRecord'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container{
		.camera-tip{
			position: absolute;
			top: 40rpx;
			padding: 0 94rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 52rpx;
			z-index: 100;
			opacity: 0.5;
			text{
				padding-left: 20rpx;
			}
		}
		.camera-aperture{
			position: absolute;
			top: 42%;
			left: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			z-index: 100;
			width: 90%;
			height: auto;
			opacity: 0.5;
			.outline-img{
				width: 80%;
			}
		}
		.camera-img{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 328rpx;
			z-index: 99;
			.preview-box{
				width: 100%;
				height: 100%;
				overflow: hidden;
				.preview{
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		.flip-view{
			position: absolute;
			display: flex;
			align-items: center;
			color: #fff;
			border: 2rpx solid #fff;
			bottom: 354rpx;
			left: 50%;
			transform: translateX(-50%);
			padding: 10rpx 12rpx;
			border-radius: 12rpx;
			z-index: 100;
			.menu-flip{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
		.menu{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 328rpx;
			box-sizing: border-box;
			z-index: 99;
			.menu-mask{
				position: relative;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				z-index: 99;
			}
			.snapshot-view{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				z-index: 99;
				.snapshot-btn{
					position: relative;
					z-index: 99;
					.menu-snapshot{
						width: 152rpx;
						height: 152rpx;
						z-index: 99;
					}
					.menu-confirm{
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						width: 66rpx;
						height: 50rpx;
						z-index: 99;
					}
				}
				text{
					color: #fff;
					font-size: 28rpx;
					margin-top: 10rpx;
					z-index: 99;
				}
			}
			.menu-upload{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 80rpx;
				width: 112rpx;
				height: 124rpx;
				z-index: 99;
			}
			.menu-record{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 80rpx;
				width: 112rpx;
				height: 124rpx;
				z-index: 99;
			}
		}
	}
</style>
